<template>
    <div>
        <Header v-if="showHeader" title="我审批的"></Header>
        <div ref="topWarp" class="top-warp">
            <div class="nav">
                <div :class="{'active':tabType==0}" @click="changeTab(0)">{{pageNameTab1}}</div>
                <div :class="{'active':tabType==1}" @click="changeTab(1)">{{pageNameTab2}}</div>
            </div>
            <div class="search">
                <van-search v-model="value" placeholder="请输入关键字搜索" show-action shape="round" @search="onSearch(tabType)">
                    <div slot="action" @click="onSearch(tabType)">搜索</div>
                </van-search>
            </div>
        </div>
        <!--待我审批的-->
        <mescroll-vue ref="mescroll0" v-show="tabType==0" :down="getMescrollDown(0)" :up="getMescrollUp(0)" @init="mescrollInit0">
            <ul id="dataList0">
                <ApproveList :list="tab0.list" :pageName="pageNameTab1"></ApproveList>
            </ul>
        </mescroll-vue>
        <!-- 我已审批的 可不配down-->
        <mescroll-vue ref="mescroll1" v-show="tabType==1" :up="getMescrollUp(1)" @init="mescrollInit1">
            <ul id="dataList1">
                <ApproveList :list="tab1.list" :pageName="pageNameTab2"></ApproveList>
            </ul>
        </mescroll-vue>
        <Loading v-show="showLoading"></Loading>
    </div>
</template>
<script>
import { checking,checked } from "@/request/api.js";
import MescrollVue from 'mescroll.js/mescroll.vue'
import ApproveList from "@/components/business/ApproveList.vue";
import Loading from "@/components/Loading.vue";
import Header from "@/components/Header.vue";
export default {
    name:'',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            showLoading:false,
            staffer_id:'',
            value:'', 
            pageNameTab1:'待我审批的',
            pageNameTab2:'我已审批的',
            tab0: {mescroll: null, list: [], isListInit: false}, // 全部
            tab1: {mescroll: null, list: [], isListInit: false}, // 奶粉
            tabType: 0 // 菜单类型
        }
    },
    components:{
        MescrollVue,
        ApproveList,
        Loading,
        Header
    },
    mounted(){
        var h = document.body.clientHeight
        this.clientH = h - 200 + 'px';
        this.staffer_id = localStorage.getItem('staffer_id');
        if (this.showHeader) {
            this.$refs.topWarp.style.top = 44 + 'px'
            this.$refs.mescroll0.$el.style.top = 132 + 'px'
            this.$refs.mescroll1.$el.style.top = 132 + 'px'
        }
        // this.tabType = this.$store.state.tabActive;
    },
    methods:{
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit0 (mescroll) {
            mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
            this.tab0.mescroll = mescroll;
        },
        mescrollInit1 (mescroll) {
            mescroll.tabType = 1;
            this.tab1.mescroll = mescroll;
        },
        // 多mescroll的配置,需通过方法获取,保证每个配置是单例
        getMescrollDown (tabType) {
            let isAuto = tabType === 0; // 第一个mescroll传入true,列表自动加载
            return {
                auto: isAuto,
                callback: this.downCallback
            }
        },
        getMescrollUp (tabType) {
            let emptyWarpId = 'dataList' + tabType;
            return {
                auto: false,
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    limit: 10 //每页数据条数,默认10
                },
                empty: {
                warpId: emptyWarpId, // 父布局的id;
                tip: '没有更多了~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            }
        },
        /* 下拉刷新的回调 */
        downCallback (mescroll) {
            // 这里加载你想下拉刷新的数据, 比如刷新tab1的轮播数据
            if (mescroll.tabType === 0) {
                // loadSwiper();
            } else if (mescroll.tabType === 1) {
                // ....
            }
            mescroll.resetUpScroll();// 触发下拉刷新的回调,加载第一页的数据
        },
        /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        upCallback (page, mescroll) {
            if (mescroll.tabType === 0) {
                // 全部
                this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
                checking({token:this.$store.state.token,id:this.staffer_id,page:page.num,page_num:page.limit}).then(res=>{
                    // 请求的列表数据
                    let arr = res.data
                    mescroll.endSuccess(arr.data.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    // 如果是第一页需手动置空列表
                    if (page.num === 1) this.tab0.list = []
                    // 把请求到的数据添加到列表
                    this.tab0.list = this.tab0.list.concat(arr.data)
                        // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.data.length)
                    })
                }).catch((e) => {
                    if (page.num === 1) this.tab0.isListInit = false;
                    // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr()
                })
            } else if (mescroll.tabType === 1) {
                // 奶粉
                this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
                checked({token:this.$store.state.token,id:this.staffer_id,page:page.num,page_num:page.limit}).then(res=>{
                    // 请求的列表数据
                    let arr = res.data
                    mescroll.endSuccess(arr.data.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    // 如果是第一页需手动置空列表
                    if (page.num === 1) this.tab1.list = []
                    // 把请求到的数据添加到列表
                    this.tab1.list = this.tab1.list.concat(arr.data)
                        // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.data.length)
                    })
                }).catch((e) => {
                    if (page.num === 1) this.tab1.isListInit = false;
                    // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr()
                })
            }
        },
        // 切换菜单
        changeTab (type) {
            let curTab = this.getTabData(this.tabType);// 当前列表
            let newTab = this.getTabData(type);// 新转换的列表
            this.tabType = type // 切换菜单
            this.$store.commit('setTabActive',this.tabType);
            if (!newTab.isListInit) {
                newTab.mescroll.triggerDownScroll(); // 加载列表
            }
        },
        // 获取菜单对应的数据
        getTabData (tabType) {
            if (tabType == null) tabType = this.tabType;
            if (tabType === 0) {
                return this.tab0;
            } else if (tabType === 1) {
                return this.tab1;
            }
        },
        onSearch(type){
            this.showLoading = true;
            console.log(type)
            if (type == 0) {
                checking({token:this.$store.state.token,page:1,page_num:this.limit,fd_sta_name:this.value}).then(res=>{
                    let list = res.data;
                    this.tab0.list =list.data;
                    this.showLoading = false;
                }).catch(error=>{
                    console.log(error)
                    this.showLoading = false;
                })
            } else if(type == 1) {
                checked({token:this.$store.state.token,page:1,page_num:this.limit,fd_sta_name:this.value}).then(res=>{
                    let list = res.data;
                    this.tab1.list =list.data;
                    this.showLoading = false;
                }).catch(error=>{
                    console.log(error)
                    this.showLoading = false;
                })
            }
            
        }
    },
}
</script>
<style lang="less" scoped>
.refresh_wrapper{
    width: 100%;
    min-height: 300px;
    background-color: #fff;
}
.search{
    width: 100%;
    height: 44px;
    overflow: hidden;
    .van-search{padding-top: 0;padding-bottom: 0;height: 44px;}
}
.search>div{height: 44px !important;}
.van-search__action{font-size: 15px;color: #626466;}
/deep/ .van-field__left-icon .van-icon{font-size: 15px;font-weight: bolder;}
/deep/ .van-field__body{font-size: 14px;color: #999;}
/*以fixed的方式固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 88px;
    bottom: 0;
    height: auto;
  }

  .top-warp{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background-color: #fff;
    .nav{
        text-align: center;
        height: 44px;
        background: #fff;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        .active{
            border-bottom: 1px solid #02ccbd;
            color: #02ccbd;
        }
    }
    .nav > div{
        line-height: 44px;
        font-size: 17px;
        flex: 1;
    }
  }
</style>